<template>
  <view class="uni-pages">
    <view class="navigation" :style="{ background: bgcolor }">
      <!-- #ifdef MP-WEIXIN -->
      <view class="nav-bar-top" :style="{ height: menuButton.top + 'px' }"></view>
      <view class="nav-bar-inner">
        <view class="image-box" :style="{ height: menuButton.height + 'px' }">
          <image class="image" src="https://rwstatic.tentons.cn/web/Lesson/images/header-back.png"
            @click="handleCallBack"></image>
        </view>
        <view class="title" :style="'color:' + color + ';'">{{ title }}</view>
        <view class="base-box" :style="{ height: menuButton.height + 'px', width: menuButton.width + 'px' }"></view>
      </view>
      <!-- #endif -->

      <!-- #ifdef H5 -->
      <!-- #endif -->
      <view class="nav-bar-bottom" v-if="borderLine" style="height: 7px"></view>
      <view v-else style="height: 8px"></view>
    </view>

    <statusLine v-if="isShowProcess" class="progress" :progress="progress" />
    <image v-if="isShowBottomImage" class="header-bottom-image"
      src="https://rwstatic.tentons.cn/web/Lesson/images/freeTalk/scene-top-icon.png" />
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import statusLine from "./statusLine.vue";

const props = defineProps({
  title: {
    type: String,
    default: "奶酪单词",
  },
  bgcolor: {
    type: String,
    default: "#FDF2E0",
  },
  color: {
    type: String,
    default: "#7c2d10",
  },
  // 是否显示底部border
  borderLine: {
    type: Boolean,
    default: true,
  },
  backMethod: {
    type: [Function, String],
    default: ''
  },
  // 进度
  progress: {
    type: Number,
    default: 0,
  },
  isShowProcess: {
    type: Boolean,
    default: false,
  },
  isShowBottomImage: {
    type: Boolean,
    default: false,
  }
});

// #ifdef MP-WEIXIN
const menuButton = ref(uni.getMenuButtonBoundingClientRect()); // 获取不同机型胶囊按钮对应的属性值（宽高，胶囊距离顶部的距离）
// #endif

const handleCallBack = () => {
  if (props.backMethod) {
    typeof props.backMethod == "function" && props.backMethod();
  } else {
    const pages = getCurrentPages();

    if (pages.length <= 1) {
      uni.reLaunch({ url: "/pages/tabBar/home/index" });
    } else {
      uni.navigateBack({
        delta: 1,
      });
    }
  }
}
</script>

<style scoped lang="scss">
.uni-pages {
  .navigation {
    .nav-bar-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;

      .image-box {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .image {
          width: 46px;
          height: 40px;
          margin-left: 15px;
        }
      }

      .title {
        font-size: 20px;
        font-family: xiaolai;
        color: $uni-text-color;
      }
    }

    .nav-bar-bottom {
      border-bottom: 1px solid #ede3d7;
    }
  }

  .header-bottom-image {
    width: 100%;
    height: 1.8rem;
    margin-top: -1rem;
  }
}
</style>
